<template>
  <view>
    <view style="position: absolute;z-index: -1;top: 0;left: 0;width: 100%;height: 100vh">
      <image src="/static/image/bg/backGroundSkyblue.png" style="width: 100%;height: 100%"></image>
    </view>
    <!--验证码登录-->
    <view class="cardContent">
      <view style="margin-bottom: 120rpx">
        <view style="margin-bottom: 13rpx;font-size: 42rpx;font-weight: bold;text-align: center">欢迎登录顺顺助融</view>
      </view>

      <view class="row" style="margin-bottom: 60rpx">
        <uni-easyinput placeholder="请输入手机号" maxlength="11" v-model="codeLoginForm.phone">
          <template slot="left">
            <image style="width: 30rpx; height: 34rpx; margin-left: 30rpx;" src="/static/image/icon/mobile.png"></image>
          </template>
        </uni-easyinput>
      </view>
      <view class="row">
        <uni-easyinput placeholder="请输入验证码" maxlength="4" v-model="codeLoginForm.code">
          <template slot="left">
            <image style="width: 30rpx; height: 34rpx; margin-left: 30rpx;"
                   src="/static/image/icon/code01.png"></image>
          </template>
          <template slot="right">
            <view :class="!btnDisabled ? 'btnStyle' : 'btnDisabledStyle'" @click="getCode">
              获取验证码{{ btnDisabled ? "(" + countDown + ")" : "" }}
            </view>
          </template>
        </uni-easyinput>
      </view>
      <view class="grant" @click="bindPhoneFun">登录</view>
    </view>
    <view class="arrge-box">
      <checkbox-group @change="isChecked = !isChecked">
        <checkbox color="#488afd" style="transform:scale(0.7);" :checked="isChecked" shape="circle">
        </checkbox>
      </checkbox-group>
      <view class="ys">
        <text style="color: #999;">请您先阅读并同意</text>
        <text @click="linkPrivacy(0)" style="color: #488afd">《用户服务协议》</text>
        <text style="color: #999;">和</text>
        <text @click="linkPrivacy(1)" style="color: #488afd">《隐私政策》</text>
      </view>
    </view>


    <uni-popup ref="popup" type="center" background-color="#fff">
      <view class="popup-content">
        <view style="padding: 30rpx 0; ">
          <view style="text-align: center; font-size: 38rpx; font-weight: bold;">温馨提示</view>
            <view  style="text-align: center; margin-top: 40rpx;" class="ys">
            <text style="color: #999">请先同意</text>
            <text @click="linkPrivacy(0)" style="color: #488afd">《用户服务协议》</text>
            <text style="color: #999">和</text>
            <text @click="linkPrivacy(1)" style="color: #488afd">《隐私政策》</text>
          </view>
        </view>
       <view style="text-align: center; display: flex; margin-top: 30rpx; border-top: 1rpx solid #eee; height: 90rpx; line-height: 90rpx;">
        <view style="width: 49%;border-right: 1rpx solid #eee;" @click="cancle()">取消</view>
        <view style="width: 49%;color: #488afd" @click="closePopup()">同意</view>
       </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {authBindPhoneNumber, H5SmsCode} from "@/api/user";
import store from "@/store";
import {saveLoginEndTime} from "@/utils/auth";

export default {
  data() {
    return {
      codeLoginForm: {
        phone: '',
        code: ''
      },
      key: '',
      btnDisabled: false,
      countDown: 60,
      isChecked: false,
      disabled: false,
    }
  },
  onLoad(options) {
    this.key = options?.key
  },
  methods: {
    closePopup(){
      this.isChecked = true
      this.$refs.popup.close()
    },
    cancle(){
      this.$refs.popup.close()
    },
    bindPhoneFun() {
      if (this.codeLoginForm.phone === '' || this.codeLoginForm.code === '') {
        return this.$util.Tips('请输入手机号，验证码')
      }
      if (this.codeLoginForm.phone) {
        const reg = /^1[3-9][0-9]\d{8}$/;
        if (!reg.test(this.codeLoginForm.phone)) {
          return this.$util.Tips("请输入正确的手机号")
        }
      }
      if (!this.isChecked) {
        return this.$refs.popup.open()
      }
      if (this.disabled) return
      let timer = setTimeout(() => {
        this.disabled = false
        clearTimeout(timer)
      },2000)
      authBindPhoneNumber({
        phone: this.codeLoginForm.phone,
        captcha: this.codeLoginForm.code,
        type: 'wechat',
        key: this.key
      }).then(async phone => {
        if (phone.code === 200) {
          await saveLoginEndTime(phone.data.expiresIn)
          await store.commit('LOGIN', { token: phone.data.tokenHead + phone.data.token });
          await store.commit("SETUID", phone.data.memberId);
          await store.dispatch('USERINFO',phone.data.memberId)
          this.$util.Tips({ title: "绑定成功" });
            setTimeout(()=> {
              uni.navigateBack({
                delta: 1,
              });
            },500)
        }
      })
      this.disabled = true
    },
    getCode() {
      if (!this.codeLoginForm.phone) {
        return this.$util.Tips("请输入手机号")
      }
      if (this.codeLoginForm.phone) {
        const reg = /^1[3-9][0-9]\d{8}$/;
        if (!reg.test(this.codeLoginForm.phone)) {
          return this.$util.Tips("请输入正确的手机号")
        }
      }
      this.clickCode = true
      if (this.btnDisabled) {
        return
      }
      this.btnDisabled = true;
      H5SmsCode({
        telephone: this.codeLoginForm.phone
      }).then(res => {
        if (res.code === 200) {
          this.$util.Tips('验证码已发送，请注意查收')
        } else {
          this.$util.Tips(res.msg)
        }
      }).finally(e => {
        let timer = setInterval(() => {
          if (this.countDown > 0) {
            this.countDown--;
          } else {
            clearInterval(timer);
            this.btnDisabled = false;
            this.countDown = 60;
          }
        }, 1000);
      })
    },
    linkPrivacy(type) {
      this.$refs.popup.close();
      uni.navigateTo({
        url: '/pages/privacy/index?privacyType=' + type
      })
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .uni-easyinput__content {
  height: 88rpx;
}
.grant {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 26rpx;
  border-radius: 15rpx;
  color: #fff;
  background: linear-gradient(180deg, #0f62fe 0%, #0f62fe 100%);
  overflow: hidden;
  padding: 0;
  margin-top: 60rpx;
  text-align: center;
  letter-spacing: 4rpx;
}
.cardContent {
  width: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
}
.btnDisabledStyle {
  width: 200rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 20rpx;
  background: #CCCCCC;
  cursor: not-allowed;
  border: none;
  color: white;
  text-align: center;
  border-radius: 0 10rpx 10rpx 0;
}

.btnStyle {
  width: 160rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 20rpx;
  background: #0f62fe;
  border: none;
  color: white;
  text-align: center;
  border-radius: 0 10rpx 10rpx 0;
}
.arrge-box {
  font-size: 24rpx;
  color: #555;
  padding: 0 24rpx;
  margin-top: 25rpx;
  display: flex;
  position: fixed;
  bottom: 80rpx;
  width: 660rpx;
  left: 50%;
  transform: translateX(-50%);
  /* align-items: center; */
  text {
    font-size: 24rpx;
    line-height: 50rpx;
  }
  radio-group,
  checkbox-group {
    width: auto;
  }
}
/deep/ .is-input-border {
  border: none;
}
.popup-content {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   justify-content: center;
  // padding: 15px;
  height: 310rpx;
  background-color: #fff;
//   text-align: center;
  width: 590rpx;
  margin: 0 auto;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  z-index: 999;
  color: #000;
}
/deep/ .uni-popup .uni-popup__wrapper {
  border-radius: 20rpx !important;
  overflow: hidden !important;
}
</style>